<template>
  <div>
    <el-menu
      active-text-color="#fff"
      background-color="#121e41"
      default-active="formList"
      text-color="#a7acba"
      router
    >
      <div>
        <img
          src="@/assets/image.png"
          alt=""
          style="width: 121px; height: 50px; text-align: center"
        />
      </div>
      <el-menu-item
        v-for="item in formList"
        :key="item.name"
        :index="item.name"
      >
        <component :is="item.lcon" style="width: 20px" />
        <span>{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Menu as IconMenu, Setting } from '@element-plus/icons-vue'

interface Student {
  name: string
  label: string
  lcon: typeof IconMenu | typeof Setting
}
// // 跳转路由地址
const formList = ref<Student[]>([
  { name: '/home', label: '首页', lcon: IconMenu },
  { name: '/structure', label: '组织', lcon: Setting },
  { name: '/character', label: '角色', lcon: Setting },
  { name: '/staffView', label: '员工', lcon: Setting },
  { name: '/authority', label: '权限', lcon: Setting },
  { name: '/attendanceView', label: '考勤', lcon: Setting },
  { name: '/approvalView', label: '审批', lcon: Setting },
  { name: '/salary', label: '工资', lcon: Setting },
  { name: '/leave', label: '社保', lcon: Setting }
])
</script>

<style scoped>

</style>
